<template>
  <!-- 模板7 -->
  <div
    class="c-w100"
    v-if="(themeName == 'mb7' && isFromM7) || isMicroPage"
  >
    <!-- 一行一列 -->
    <div v-if="itemType == 1" class="c-pt24">
      <div
        class="c-pv20"
        v-for="(item, index) in circleList"
        :key="index"
        @click="handleClickCircleFeed(item.circleId)"
      >
        <div class="c-flex-row c-bg-white c-br16 c-text-hidden">
          <div class="c-ww160 c-maxh160 c-text-hidden" :class="!isSetPageBackground ? 'c-br16' : ''">
            <img
              class="c-w100 c-h"
              :src="$addXossFilter(item.cover || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-pl20" :class="isSetPageBackground ? 'c-pv20 c-pr10' : ''">
            <p class="c-fs24 c-text-ellipsis2 c-fc-xblack c-fw-b">{{item.name}}</p>
            <div class="c-flex-row c-justify-sb c-aligni-center">
              <template v-if="visible.priceVisible">
                <div
                  class="theme-fc c-lh c-fw-b"
                  :class="(Number(item.price) == 0 && ![1, 3, 4].includes(item.payType)) || ([1, 3, 4].includes(item.payType)) ? 'c-fs22':'c-fs24'"
                >
                  <span v-if="![1, 3, 4].includes(item.payType)">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 181)}}
                </div>
              </template>
              <div class="c-fs18 c-fc-gray" v-if="visible.dataVisible">
                <span>{{item.memberCount | formatTenThousand}}人加入</span> |
                <span>{{item.feedCount | formatTenThousand}}条动态</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showMore" class="c-fs20 c-textAlign-c c-pv16" :class="pageTextColor ? 'pageTextColor' : 'c-fc-sblack'" @click="clickMore">查看更多 <span class="icon iconfont">&#xe836;</span></div>
    </div>
    <!-- 一行多列 -->
    <template v-if="itemType == 2">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb4 c-pt24">
        <div
          class="c-inlineblack c-vcAlign-top c-ww260 c-mr20 c-bd1 c-br16 c-text-hidden c-pb16 c-bg-white"
          v-for="(item, index) in circleList"
          :key="index"
          @click="handleClickCircleFeed(item.circleId)"
          :class="index == circleList.length - 1 ?'':'c-mr24'"
        >
          <div class="c-w100 c-text-hidden c-maxh240">
            <img
              class="c-w100 c-h imgCloseBig c-br-tl16 c-br-tr16"
              :src="$addXossFilter(item.cover || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-w100 c-ph10 c-pt16">
            <p class="c-fs24 c-fc-xblack c-text-ellipsis1 c-fw-b">{{item.name}}</p>
            <div class="c-flex-row c-aligni-center c-justify-sb">
              <div
                class="c-mt10"
                v-if="visible.priceVisible"
              >
                <div
                  class="theme-fc c-lh c-fw-b"
                  :class="(Number(item.price) == 0 && ![1, 3, 4].includes(item.payType)) || ([1, 3, 4].includes(item.payType)) ? 'c-fs22':'c-fs24'"
                >
                  <span v-if="![1, 3, 4].includes(item.payType)">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 181)}}
                </div>
              </div>
              <p class="c-fs20 c-fc-gray c-text-ellipsis1 c-mt8" v-if="visible.dataVisible">{{item.memberCount | formatTenThousand}}人加入</p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
  <!-- 模板6 -->
  <div
    class="c-ph24 c-pt24 c-pb24 c-mt12 c-bg-white"
    v-else-if="themeName == 'mb6' && !isMicroPage"
  >
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{circleName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{circleDesc}}</span>
      <span
        class="c-fs18 c-fc-gray"
        @click="clickMoreCircle"
      >更多</span>
    </div>
    <div class="c-pt24">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-ws-n">
        <div
          class="c-flex-column c-aligni-center c-ww240 c-mb20 c-br16 c-bg-white circleItem c-mr24"
          v-for="(item, index) in circleList"
          :key="index"
          @click="handleClickCircleFeed(item.circleId)"
          :class="index == circleList.length - 1 ?'':'c-mr24'"
        >
          <div class="c-ww240 c-text-hidden c-hh230">
            <img
              class="c-w100 c-h imgCloseBig c-br-tl16 c-br-tr16"
              :src="$addXossFilter(item.cover || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-w100 c-ph20 c-pv16">
            <p class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</p>
            <p class="c-fs20 c-fc-gray c-text-ellipsis1 c-mt8">{{item.memberCount | formatTenThousand}}人加入</p>
            <div
              class="c-mt20"
            >
              <div
                class="theme-fc c-lh"
                :class="(Number(item.price) == 0 && ![1, 3, 4].includes(item.payType)) || ([1, 3, 4].includes(item.payType)) ? 'c-fs22':'c-fs24'"
              >
                <span v-if="![1, 3, 4].includes(item.payType)">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 181)}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 模板5 -->
  <div
    class="c-ph24 c-pt40 c-pb30 c-bd-b1"
    v-else-if="themeName == 'mb5' && !isMicroPage"
  >
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{circleName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{circleDesc}}</span>
      <span
        class="c-fs20 c-fc-gray"
        @click="clickMoreCircle"
      >更多</span>
    </div>
    <div class="c-pt30">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-ws-n">
        <div
          class="c-flex-column c-aligni-center c-ww240 c-mb20 c-br16 c-bg-white circleItem"
          v-for="(item, index) in circleList"
          :key="index"
          @click="handleClickCircleFeed(item.circleId)"
          :class="index == circleList.length - 1 ?'':'c-mr24'"
        >
          <div class="c-ww240 c-text-hidden c-hh230">
            <img
              class="c-w100 c-h imgCloseBig c-br-tl16 c-br-tr16"
              :src="$addXossFilter(item.cover || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-w100 c-ph20 c-pv16">
            <p class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</p>
            <p class="c-fs20 c-fc-gray c-text-ellipsis1 c-mt8">{{item.memberCount | formatTenThousand}}人加入</p>
            <div
              class="c-mt20"
            >
              <div
                class="theme-fc c-lh"
                :class="(Number(item.price) == 0 && ![1, 3, 4].includes(item.payType)) || ([1, 3, 4].includes(item.payType)) ? 'c-fs22':'c-fs24'"
              >
                <span v-if="![1, 3, 4].includes(item.payType)">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 181)}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 模板4 -->
  <div
    class="c-ph24 c-bd-b12-f5"
    v-else-if="themeName == 'mb4' && !isMicroPage"
  >
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-lh c-pl20 c-p"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{circleName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{circleDesc}}</span>
      <span
        class="c-fs20 c-fc-gray c-pl8"
        @click="clickMoreCircle"
      >查看更多</span>
    </div>
    <div class="c-pv24">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-ws-n">
        <div
          class="c-flex-column c-aligni-center c-ww240 c-mb20 c-br16 c-bg-white circleItem"
          @click="handleClickCircleFeed(item.circleId)"
          :class="index == circleList.length - 1 ?'':'c-mr24'"
          v-for="(item, index) in circleList"
          :key="index"
        >
          <div class="c-ww240 c-text-hidden c-hh230">
            <img
              class="c-w100 c-h imgCloseBig c-br-tl16 c-br-tr16"
              :src="$addXossFilter(item.cover || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-w100 c-ph20 c-pv16">
            <p class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</p>
            <p class="c-fs20 c-fc-gray c-text-ellipsis1 c-mt8">{{item.memberCount | formatTenThousand}}人加入</p>
            <div
              class="c-mt20"
            >
              <div
                class="theme-fc c-lh"
                :class="(Number(item.price) == 0 && ![1, 3, 4].includes(item.payType)) || ([1, 3, 4].includes(item.payType)) ? 'c-fs22':'c-fs24'"
              >
                <span v-if="![1, 3, 4].includes(item.payType)">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 181)}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 模板3 -->
  <div
    class="c-w100"
    v-else-if="themeName == 'mb3' && !isMicroPage"
  >
    <index-three-title-com
      :titleName="circleName"
      :titleDesc="circleDesc"
      @clickMore="clickMoreCircle"
    ></index-three-title-com>
    <div class="c-ph24 c-bd-b12-f5 c-pv24">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-ws-n">
        <div
          class="c-flex-column c-aligni-center c-ww240 c-mb20 c-br16 c-bg-white circleItem "
          v-for="(item, index) in circleList"
          :key="index"
          :class="index == circleList.length - 1 ?'':'c-mr24'"
          @click="handleClickCircleFeed(item.circleId)"
        >
          <div class="c-ww240 c-text-hidden c-hh230">
            <img
              class="c-w100 c-h imgCloseBig c-br-tl16 c-br-tr16"
              :src="$addXossFilter(item.cover || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-w100 c-ph20 c-pv16">
            <p class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</p>
            <p class="c-fs20 c-fc-gray c-text-ellipsis1 c-mt8">{{item.memberCount | formatTenThousand}}人加入</p>
            <div
              class="c-mt20"
            >
              <div
                class="theme-fc c-lh"
                :class="(Number(item.price) == 0 && ![1, 3, 4].includes(item.payType)) || ([1, 3, 4].includes(item.payType)) ? 'c-fs22':'c-fs24'"
              >
                <span v-if="![1, 3, 4].includes(item.payType)">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'IndexCircle',
  components: {
    indexThreeTitleCom
  },
  props: {
    circleName: {
      type: String,
      default: '圈子推荐'
    },
    circleDesc: {
      type: String,
      default: '圈子推荐'
    },
    circleList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    }
  },
  methods: {
    clickMore() {
      this.$emit('clickMore')
    },
    handleClickCircleFeed(id) {
      let toPath = `/homePage/circle/circleFeed?id=${id}`;
      this.iosAppRouteChange(toPath);
    },
    clickMoreCircle() {
      let toPath = `/homePage/circle/circleList`;
      this.iosAppRouteChange(toPath);
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
  }
}
</script>

<style lang="less" scoped>
.circleItem {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}
.c-maxh136 {
  max-height: 3.4rem;
}
.theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
</style>